<template>
  <div class="my">
     <table border="1" cellspacing="0" width="80%" style="margin:0 auto">
          <tr>
              <th>产品</th>
              <th>价格</th>
              <th>数量</th>
              <th>操作</th>
          </tr>
          <tr v-for="(v,k) in $store.state.car" :key="k">
              <td>{{v.pro}}</td>
              <td>{{v.p}}</td>
              <td>{{v.num}}</td>
              <td><button @click="add(v,k)">+</button></td>
          </tr>
      </table>
      <hr>
      <!-- {{$store.getters.total}} -->
       <el-slider v-model="value1" @change="ch()"></el-slider>
       {{value1}}
  
  </div>
</template>

<script>
export default {
    data(){
        return{
            value1:0
        }
    },
     methods: {
      ch(){
          console.log(this.value1)
      }
    }
}
</script>

<style>
.el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>